<template>
  <div class="main-all">
    <p><i class="el-icon-video-camera-solid"></i>管理员管理</p>
    <div class="main">
      <div class="main-1">
        <el-button icon="el-icon-plus" @click="dialogFormVisible = true; ADD()">新建</el-button>
      </div>
      <div style="overflow-y: scroll;width: 100%;height: 80%;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="管理员ID">
        </el-table-column>
        <el-table-column prop="username" label="管理员用户名">
        </el-table-column>
        <el-table-column prop="password" label="密码">
        </el-table-column>
        <el-table-column prop="privilege" label="权限个数">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click=" dialogFormVisible = true; changed(scope.row)">编辑</el-button>
            <el-button type="text" @click=" deletes(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!--  -->


      <el-dialog width="35%" title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input style="width: 100%; margin-left: 0;" v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限" :label-width="formLabelWidth">
            <el-checkbox-group v-model="checkList"
              style="display: flex;flex-direction: column; text-align: left;">
              <el-checkbox :label="'1'" name="type">系管理</el-checkbox>
              <el-checkbox :label="'2'" name="type">专业管理</el-checkbox>
              <el-checkbox :label="'4'" name="type">班级管理</el-checkbox>
              <el-checkbox :label="'8'" name="type">学生管理</el-checkbox>
              <el-checkbox :label="'16'" name="type">教师管理</el-checkbox>
              <el-checkbox :label="'32'" name="type">课程管理</el-checkbox>
              <el-checkbox :label="'64'" name="type">选课修改</el-checkbox>
              <el-checkbox :label="'128'" name="type">管理员管理</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input type="password" style="width: 100%; margin-left: 0;" v-model="form.password"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false; ADDorChange()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>


</template>

<script>
import serve from '../api/index.js'
import { getPages, getList, ADDList, changeorno, deleted, getAdmin } from '../api/admin-edit.js'
export default {
  data() {
    return {
      input: '',
      total: 100,
      page: 1,
      tableData: [],
      add: '',
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      checkList: [],
      privilegeNum: '',
      form: {
        username: '',    //用户名
        privilege: 0,  //权限
        password: '',    //密码
        id: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    getPage() {
      getPages(this.input).then((res) => {
        console.log(res.data);
        this.total = res.data * 10
        if (res.message == 'success') {
          getList(this.page).then((res) => {
            console.log(res);
            this.tableData = res.data
            console.log(this.tableData, 'table');
            console.log(res.data.privilege);
            let group = []
            this.tableData.forEach((item) => {
              console.log(item.privilege, 'item.pri');
              for (let bit = 0; bit < 8; bit++) {
                // 0100 0000
                // 0010 0000
                if (((1 << bit) & item.privilege) === 1 << bit) {
                  group.push((1 << bit).toString());
                }
              }
              item.privilege = group.length
              group = []
            })
            console.log(res.data.privilege);
          })
        }
      })
    },//获取列表数据
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },//element
    fn2(val) {
      this.page = `${val}`
      console.log(this.page);
      this.getPage()
    },//获取页数







    ADD() {
      this.OR = 'ADD',
        this.form.id = -1
      console.log(this.form);
    },//添加列表数据  

    changed(e) {
      this.OR = 'changed'
      console.log(e, 'e');
      getAdmin(e.id).then(res => {
        console.log(res, 'admin');
        this.form = res.data
        let group = []
        console.log(this.form.privilege, 'item.pri');
        for (let bit = 0; bit < 8; bit++) {
          // 0100 0000
          // 0010 0000
          if (((1 << bit) & this.form.privilege) === 1 << bit) {
            group.push((1 << bit).toString());
            this.checkList = group
            console.log(this.checkList);
          }
        }
      })
      // item.privilege = group.length
      // group = []

    }, //修改列表数据

    ADDorChange() {
      console.log(this.form);
      if (this.OR == 'ADD') {
        // reduce 求和
        this.checkList.forEach(res => {
          this.form.privilege += parseInt(res)
        })
        console.log(this.form.privilege);

        ADDList(this.form).then((res) => {
          console.log(res);
          this.getPage()
        })

      } else if (this.OR == 'changed') {
        changeorno(this.form).then((res) => {
          console.log(res);
          this.getPage()
        })
      }
    },

    // 
    deletes(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(id).then((res) => {
          console.log(res);
        })
        this.getPage()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }); //删除列表数据   xxxx未完成

    }

  },
  mounted() {
    this.getPage()  //初始化列表数据
  }
}

</script>

<style scoped>
.el-table {
  width: 100% !important;
}

.main {
  .el-button {
    height: 40px;
  }

  .main-1 {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .el-input {
    height: 30px;
    width: 100px;
    margin-right: 20px;
    margin-bottom: 10px;
  }

}
</style>
